<template>
	<view class="cv-transfer-panel">
		
		<view class="cv-transfer-panel-body" style="height: 415px">
			<checkbox-group @change="checkboxChange" v-if="data.length">
				<uni-table border>
						<uni-tr class="tr-table--border" >
							<uni-th width="150" class="th">
								<view class="" style="display: flex;">
									<uni-data-checkbox multiple  v-model="radio1" :localdata="sex" @change="checkbox"></uni-data-checkbox>
									<!-- <uni-th width="100">宝宝姓名</uni-th style="vertical-align: top;"> -->
								</view>
							</uni-th>
							<uni-th width="150">{{rightTitle}}</uni-th>
						</uni-tr>
						<uni-tr  class="trClass" v-for="item in data" :key="item.key">
							<uni-td  style="display: flex;">
								<view>
									<!-- <checkbox :checked="radiotf"  :value="String(item.key)" color="#3889fd" @click="checkboxChange" class="mycheck" style="transform:scale(1);" /> -->
									<checkbox class="checkbox mycheck" :value="String(item.key)" style="transform:scale(1);"  :checked="radiotf"/>
								</view>
								<view class="item-label">{{item.label}}</view>
							</uni-td>
							<uni-td width="150" >{{item.className}}</uni-td>
						</uni-tr>
					
				</uni-table>
			</checkbox-group>
			<view class="empty-data" v-else>
				无数据
			</view>
		</view>
	</view>
</template>

<script>
	// import tableCheckbox from '../uni-tr/table-checkbox.vue'
	export default {
		name: 'transfer-panel',
		props: {
			data: {
				type: Array,
				default: () => ([])
			},
			rightTitle: {
				type: String,
				default: '班级'
			},
			transferType:{
				type: String,
				default: '宝贝姓名'
			}
		},
		data(){
			return {
			// localdata="sex"
			radio1:1,
			radiotf:false,
			sex: [{
				text: this.transferType,
				value: 0
			}]
			}
		},
		methods: {
			checkboxChange(event) {
				console.log('event',event)
				this.$emit('onSelect', event.detail.value)
			},
			checkbox(event){
				console.log('event',event)
				if(event.detail.value.length==1){
					this.radiotf = true;
					let list = []
					this.data.forEach(kl=>{
						list.push(kl.key)
					})
					this.$emit('onSelect', list)
				}else{
					this.radiotf = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tr-table--border{
		border-right: 1px #ebeef5 solid;
		background: #f9f9f9;
		// position: fixed;
		// width: 500px;
	}
	
	// .th{
	// 	position: sticky;
	// 	top: 0;
	// }
	.cv-transfer-panel {
		flex: 45%;
		// border: 1px solid #ebeef5;
		border-right: 1px solid #ebeef5;
		border-bottom: 1px solid #ebeef5;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
		display: inline-block;
		vertical-align: middle;
		max-height: 100%;
		box-sizing: border-box;
		// position: relative;

		&-header {
			height: 60rpx;
			line-height: 60rpx;
			background: #f5f7fa;
			margin: 0;
			padding-left: 15px;
			border-bottom: 1px solid #ebeef5;
			box-sizing: border-box;
			color: #000;
		}

		&-body {
			padding: 6px 0;
			min-height: 250rpx;
			height: 170px;
			overflow-y: auto;
			.empty-data {
				margin: 0;
				height: 30px;
				line-height: 30px;
				padding: 6px 15px 0;
				color: #909399;
				text-align: center;
				font-size: 14px;
			}

			.cv-list-cell {
				display: inline-flex;
				align-items: center;
			}

			.item-label {
				font-size: 14px;
				margin-left: 7px;
			}
		}
	}
	
	.trClass{
		line-height: 43px;
	}
	::v-deep.uni-checkbox-input{
		color: rgb(0, 122, 255);		    background: rgb(0, 122, 255);		    font-size: -13px;		    transform: scale(0.8);		    border-radius: 5px;
	}
	::v-deep uni-checkbox > .uni-checkbox-input{
		color: rgb(255, 0, 0);
	} 
</style>
